<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-08-07 10:15:45
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--相机基础-->
<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";
//-引入后处理扩展库EffectComposer.js
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
//-引入渲染器通道RenderPass
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
//-引入OutlinePass通道,给指定的某个模型对象添加一个高亮发光描边效果
import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
//-引入UnrealBloomPass通道
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
//-引入GlitchPass通道,GlitchPass通道会产生闪屏效果。
import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";
//-
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
let container, scene, renderer, camera, controls, composer;
// 渲染循环
onMounted(() => {
	container = document.getElementById("three_container");
	scene = new THREE.Scene();
	// 正投影相机
	const width = container.offsetWidth; //canvas画布宽度
	const height = container.offsetHeight; //canvas画布高度
	camera = new THREE.PerspectiveCamera(90, width / height, 0.1, 1000);
	camera.position.set(200, 300, 200); //设置相机位置
	// camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
	// camera = createCamera(THREE, container);

	//--
	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setSize(container.offsetWidth, container.offsetHeight);
	container.appendChild(renderer.domElement);

	renderer.render(scene, camera);

	//--
	controls = new OrbitControls(camera, renderer.domElement);
	controls.update();
	//--
	const axesHelper = new THREE.AxesHelper(800);
	scene.add(axesHelper);
	demo();
	animate11(renderer, scene, camera);
	//--
	const ambient = new THREE.AmbientLight("#ffffff");
	scene.add(ambient);
});

const animate11 = (renderer, scene, camera) => {
	composer.render();
	requestAnimationFrame(animate11.bind(this, renderer, scene, camera));
	// renderer.render(scene, camera);
};
const demo = () => {
	const geometry = new THREE.BoxGeometry(100, 100, 100);
	const material = new THREE.MeshBasicMaterial({
		color: 0xff0000,
		transparent: true,
		opacity: 0.5
	});
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	/**
	 * ----------------------------OutlinePass高亮发光描边样式
	 */
	// 创建后处理对象EffectComposer，WebGL渲染器作为参数
	composer = new EffectComposer(renderer);
	// 创建一个渲染器通道，场景和相机作为参数
	const renderPass = new RenderPass(scene, camera);
	// 设置renderPass通道
	composer.addPass(renderPass);
	// OutlinePass第一个参数v2的尺寸和canvas画布保持一致
	const v2 = new THREE.Vector2(container.offsetWidth, container.offsetHeight);
	// const v2 = new THREE.Vector2(800, 600);
	const outlinePass = new OutlinePass(v2, scene, camera);
	// 一个模型对象
	outlinePass.selectedObjects = [mesh];
	outlinePass.selectedObjects = [mesh];
	outlinePass.selectedObjects = [mesh];
	outlinePass.selectedObjects = [mesh];
	//模型描边颜色，默认白色
	outlinePass.visibleEdgeColor.set(0xffff00);
	//高亮发光描边厚度
	outlinePass.edgeThickness = 4;
	//高亮描边发光强度
	outlinePass.edgeStrength = 6;
	//模型闪烁频率控制，默认0不闪烁
	outlinePass.pulsePeriod = 2;
	// 设置OutlinePass通道
	composer.addPass(outlinePass);

	/**
	 * Bloom发光通道UnrealBloomPass
	 */

	// canvas画布宽高度尺寸是800, 600
	const bloomPass = new UnrealBloomPass(
		new THREE.Vector2(container.offsetWidth, container.offsetHeight)
	);
	//bloom发光强度
	bloomPass.strength = 2.0;
	// 设置OutlinePass通道
	composer.addPass(bloomPass);

	/**
	 * GlitchPass通道会产生闪屏效果。
	 */
	const glitchPass = new GlitchPass();
	// 设置glitchPass通道
	// composer.addPass(glitchPass);
};
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
.downLoadBtn {
	position: absolute;
	right: 0;
	top: 10px;
	z-index: 99;
	cursor: pointer;
}
</style>
